
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="../static/layui/css/layui.css">
<script src="../static/layui/layui.js"></script>
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<script src="../static/jquery-latest.js"></script>
<script src="/static/fun.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<head>
  <meta charset="utf-8">

  <style type="text/css">
    .container{
      width: 420px;
      height: 335px;
      min-height: 320px;
      max-height: 350px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      padding: 20px;
      z-index: 130;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
      font-size: 16px;
    }
    .close{
      background-color: white;
      border: none;
      font-size: 18px;
      margin-left: 410px;
      margin-top: -10px;
    }

    .layui-input{
      border-radius: 5px;
      width: 300px;
      height: 40px;
      font-size: 15px;
    }
    .layui-form-item{
      margin-left: -20px;
    }
    #logoid{
      margin-top: -16px;
      padding-left:150px;
    }
    .layui-btn{
      margin-left: -50px;
      border-radius: 5px;
      width: 350px;
      height: 40px;
      font-size: 15px;
    }
    .verity{
      width: 120px;
    }
    .font-set{
      font-size: 13px;
      text-decoration: none;
      margin-left: 120px;
    }
    a:hover{
      text-decoration: underline;
    }

  </style>
</head>
<body>
<form class="layui-form" action="" method="post">
  <div class="container">
    <div class="layui-form-mid layui-word-aux">
      <img id="logoid" src="/static/images/login.png" height="50">
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">学 &nbsp;&nbsp;号</label>
      <div class="layui-input-block">
        <input type="text" name="number" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
      <div class="layui-input-inline">
        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
      <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">验证码</label>
      <div class="layui-input-inline">
        <input type="text" id="yzm" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input verity">
      </div>
      <canvas id="canvas" width="100" height="40" class="admin-captcha"></canvas>

    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">身 &nbsp;&nbsp;份</label>
      <div class="layui-input-block">
        <input type="radio" name="status" value="学生" title="学生" checked="">
        <input type="radio" name="status" value="老师" title="老师" style="margin-left: 25px">
      </div>
    </div>
    <!-- 			  <div class="layui-form-item">
                        <label class="layui-form-label">记住密码</label>
                        <div class="layui-input-block">
                          <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
                        </div>
                  </div> -->

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="login">登陆</button>
      </div>
    </div>
<!--    <a href="" class="font-set">忘记密码?</a> <a href="" class="font-set">立即注册</a>-->
  </div>
</form>
<script>
  layui.use(['form', 'layedit', 'laydate'], function(){
    var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

    //监听提交
    var show_num = [];
    draw(show_num);//验证码生成
    $("#canvas").on('click',function(){
      draw(show_num);
    })

    form.on('submit(login)', function(data){
      var val = $("#yzm").val();
      var num = show_num.join("");
      if(val == num){  //验证码输入正确
        $.ajax({
          url:'/login',
          method:'post',
          data:data.field,
          dataType:'JSON',
          success:function(res){
            if (res.code==0){    //登入失败
              layer.msg(res.res, {icon: 2});
            }else {              //登入成功
              if ($("input[name='status']:checked").val()=="学生"){
                layer.msg(res.res, {icon: 1});
                setTimeout(()=>window.location.replace("/student"),1000)
              }
              else
              {
                layer.msg(res.res, {icon: 1});
                setTimeout(()=>window.location.replace("/teacher"),1000)
              }
            }
          }
        });
        return false;
      }else{
        alert('验证码错误！请重新输入！');
        $(".input-val").val('');
        draw(show_num);
        return false;
      }
    });

    //表单初始赋值
    /* form.val('example', {
       "username": "贤心" // "name": "value"
       ,"password": "123456"
       ,"interest": 1
       ,"like[write]": true //复选框选中状态
       ,"close": true //开关状态
       ,"sex": "女"
       ,"desc": "我爱 layui"
     })*/


  });

  function draw(show_num) {
    var canvas_width=$('#canvas').width();
    var canvas_height=$('#canvas').height();
    var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
    var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
    var aCode = sCode.split(",");
    var aLength = aCode.length;//获取到数组的长度

    for (var i = 0; i <= 3; i++) {
      var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
      var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
      var txt = aCode[j];//得到随机的一个内容
      show_num[i] = txt.toLowerCase();
      var x = 10 + i * 20;//文字在canvas上的x坐标
      var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
      context.font = "bold 23px 微软雅黑";

      context.translate(x, y);
      context.rotate(deg);

      context.fillStyle = randomColor();
      context.fillText(txt, 0, 0);

      context.rotate(-deg);
      context.translate(-x, -y);
    }
    for (var i = 0; i <= 5; i++) { //验证码上显示线条
      context.strokeStyle = randomColor();
      context.beginPath();
      context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
      context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
      context.stroke();
    }
    for (var i = 0; i <= 30; i++) { //验证码上显示小点
      context.strokeStyle = randomColor();
      context.beginPath();
      var x = Math.random() * canvas_width;
      var y = Math.random() * canvas_height;
      context.moveTo(x, y);
      context.lineTo(x + 1, y + 1);
      context.stroke();
    }
  }

  function randomColor() {//得到随机的颜色值
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
  }
</script>
</body>
</html>